<template>
  <div class="cloudPlatform">
    <div class="title">
      {{ title }}
    </div>
    <div class="back-wrapper" @click="toBack">
      <div class="back-icon">
        <el-icon size="16" color="#000"><ArrowLeftBold /></el-icon>
      </div>
      <div class="text">返回</div>
    </div>
    <slot></slot>
  </div>
</template>

<script setup>
import { ArrowLeftBold } from '@element-plus/icons-vue'
const props = defineProps({
  title: String
})
const emits = defineEmits(['close'])
import { useRouter } from "vue-router";
const router = useRouter()
const toBack = () => {
  emits('close')
  router.go(-1)
}
</script>

<style lang="scss">
.cloudPlatform {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #17BDB2;
  .back-wrapper {
    position: absolute;
    top: 26px;
    left: 26px;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 100;
    .text {
      margin-left: 10px;
      color: #ffffff;
      font-size: 22px;
    }
  }
  .back-icon {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
    background-color: #ffffff;

  }
  .title {
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 42px;
    color: #FFFFFF;
    line-height: 40px;
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
  }
}
</style>
